<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useArticlesStore } from '@/stores/articles'

const route = useRoute()
const router = useRouter()
const store = useArticlesStore()
const title = ref('')
const author = ref('')
const status = ref<'draft' | 'published'>('draft')
const updatedAt = ref('')
const views = ref(0)

onMounted(() => {
  if (!store.items.length) store.hydrate()
  const id = Number(route.params.id)
  const item = store.items.find(i => i.id === id)
  if (!item) return router.replace('/articles')
  title.value = item.title
  author.value = item.author
  status.value = item.status
  updatedAt.value = item.updatedAt
  views.value = item.views
})
</script>

<template>
  <div style="padding:16px">
    <el-card>
      <h2 style="margin:0 0 8px 0">{{ title }}</h2>
      <div style="color:#666; margin-bottom:12px">作者：{{ author }} · 状态：{{ status }} · 更新时间：{{ updatedAt }} · 阅读：{{ views }}</div>
      <div>这里展示文章详情内容（可接入 Markdown 渲染）。</div>
      <div style="margin-top:12px">
        <el-button @click="$router.back()">返回</el-button>
      </div>
    </el-card>
  </div>
  
</template>

<style scoped>
</style>


